body
{
	margin: 0 auto; /* ipotizzando che sia centrato all'interno della pagina */
    padding: 0;
    
	background-color:#fff;

	font-family:Verdana, Helvetica, Arial;
	font-size:13px;
	font-variant: small-caps; /* trasforma il testo in maiuscolo */
	line-height:23px;
	color:#555;
}
	




.spaziatura-menu, .spaziatura-bassa, .spaziatura-alta, .spazio-col, .spazio-img,
#contenitore,
.sezione-flex, .sez-bottom, .box-menugrafico-flex, .box-riga, .box-col,
.colonna, .colonna-effect,
.div-img,
.privacy
{
	/* ottimizza l'impostazione degli elementi*/
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box; 				
}
			
			
			
			
			
/* ------------------------------------------------------ */
/* --- GESTIONE ELEMENTI COMUNI ------------------------- */
/* ------------------------------------------------------ */
			a:link, a:visited{
				font-family: Verdana, Helvetica, Arial;
				font-size: 13px;
				color:#000;
				text-decoration:none;
			}		
			a:hover{
				font-family: Verdana, Helvetica, Arial;
				font-size:13px;
				color:#da1d24;
				text-decoration:none;
			}



			.a-stile-titolo:link, .a-stile-titolo:visited {
				padding-bottom: 20px;
				font-weight: bold;
				font-size: 22px;

				color: #7e0202;
				-webkit-transition: 0.6s;
				-moz-transition: 0.6s;
				-o-transition: 0.6s;
				transition: 0.6s;
			}
			.a-stile-titolo:hover {color: #000;}



			.spaziatura-menu, .spaziatura-bassa, .spaziatura-alta, .spazio-col, .spazio-img{display:block;}
			.spaziatura-menu, .spaziatura-alta{height:60px;}
			.spaziatura-bassa{height:20px;}			
						
			.spazio-col{width:20px;}
			
			.spazio-img{width:50px;}


			/*.spazio-img{border:solid 1px black;}*/


			.bordo{border: solid 1px #DDD;}
			.linea{border-top:solid 1px #DDD;
			       margin:0 10% 0 10%;
			      }	
		


			.testo-piccolo{font-size:8px;}





/* ---------------------------------------------------------------------------------------------------------- */
/* ---------------------------------- GESTIONE ELEMENTI BASE DELLE PAGINE ----------------------------------- */
/* ---------------------------------------------------------------------------------------------------------- */





#contenitore
{
	width:100%;
	
	margin: 0 auto;
	text-align:center;
	
}
	
	
	
	

			/* --------------------------------- SEZIONE ------------------------------- */
			/* --- La sezione deve essere sempre inserita all'interno di contenitore --- */
			.sezione-flex, .sez-bottom
			{

				display: flex;
				
				/* Giustifica verticalmente (parte dall'alto) tutti gli elementi inseriti all'interno di sezione che sono flex */
				-webkit-align-items: flex-start;
						align-items: flex-start;
						
				/* Giustifica orizzontalmente (Centra) tutti gli elementi inseriti all'interno di sezione che sono flex */
				-webkit-justify-content: center;
						justify-content: center;

				width:100%;
			
			}
			
			
		

			
			.sezione-flex, .sez-bottom
			{
				/* Lascia 20 px dal bordo (contenitore)*/
				padding-left:20px;
				padding-right:20px;		
			}
			

			.sez-bottom
			{
				border-top:solid 2px #AAA; 
				background-color:#111; 

				color:#FFF; 
				font-size:10px; 
				line-height:24px;
			}
					.sez-bottom .titoli
					{
						font-size:11px;
						font-weight:bold;
					}		
					
					.sez-bottom a:link, .sez-bottom a:visited
					{
						font-size:9px;
						color:#AAA;
					}
					.sez-bottom a:hover
					{
						font-size:9px;
						color:#FFF;
					}
					
					.sez-bottom .space-up-down 
					{
						padding-top:20px;
						padding-bottom:20px;		
					}
								

			.bottom-allinea-t{text-align:left;}
			.bottom-t-dx{text-align:right;}

			
			
			
			
				/*	.box-riga, .box-col 
					generalmente contenuti in .sezione-flex 
					per contenere .colonna creando elenchi orizzontali o verticali 
				*/
				
				.box-riga
				{
					display: flex;					
					
					/* Giustifica orizzontalmente tutti gli elementi inseriti all'interno di sezione */
					-webkit-justify-content: flex-start;
							justify-content: flex-start;
					
					flex-flow: row nowrap; /* valore di default */
					-webkit-flex-flow: row nowrap; /* imposta a riga e non permette alla riga di andare a capo*/
					
					width:100%;
					max-width:1200px;					
				}
				
				.box-col
				{		
					display: flex;
										
					-webkit-align-items: flex-start;
							align-items: flex-start;					
							
					/* Giustifica orizzontalmente (Centra) tutti gli elementi inseriti all'interno di sezione che sono flex */
					-webkit-justify-content: center;
							justify-content: center;

					flex-flow: column;
					-webkit-flex-flow: column; /* imposta a colonna, gli elementi contenuti vengono posizionati verticalmente in colonna*/
				}				
			

			
			
			
					.colonna
					{
						/*	uguale a static (valore di default) 
							ma aggiunge proprieta top, right, bottom, e left */
						position:relative; 
					}	
					
					.altezza-col{height:290px;}

					/*
					Permette di nascondere la parte che eccede la dimensione della colonna.
					È utile soprattutto se si fissa delle dimensioni prestabilite che non si 
					vogliono eccedere ad esempio se dentro la colonna inserisco delle immagini	
					*/
					.nascondi{overflow:hidden;}	
	

					.t-sx{text-align:left;} /* da sinistra a giustificato su mobile */
					.t-cx{text-align:center;}
					.t-dx{text-align:right;} /* da destra a giustificato su mobile */
					.t-box{text-align:left;} /* da sinistra a centrato su mobile*/
					
					/* Questa impostazione ci permette di dividire un div automaticamente*/
					/* in piu colonne distribuendo il testo equamente. */
					/* Ottimo se ho solo del testo, crea effetto articolo di giornale */
					.impaginazione-a-col
					{
						/*Numero di colonne*/
						column-count: 2;
						/* Distanza tra le colonne*/
						column-gap: 30px;
					}
															
					.stile-titolo	
					{
						padding-bottom:20px;
						
						color:#7e0202; 
						font-weight:bold; 
						font-size:22px;
					}					

					.col-1{
							width:100%;
							min-width:230px;
							max-width:1200px;
						  }
					.col-2{
							width:50%;
							max-width:590px;
						  }
					.col-3{
							width:33%;
							max-width:386px;					      
						  }
					.col-4{
							width:25%;
							max-width:285px;					      
						  }	

					/* permette di creare l'effetto grafico per rendere una colonna un link */
					.link-attivo
					{
						background-color:#fff;
						border:solid 1px #bbb;
						border-radius: 2px;
						
						cursor:pointer;

						-webkit-transition: border 0.6s ease;
						-moz-transition: border 0.6s ease;
						-o-transition: border 0.6s ease;
						-ms-transition: border 0.6s ease;
						transition: border 0.6s ease;											
					}						
					.link-attivo:hover 
					{
						border: solid 1px #666;
					} 	





							/* IMG PER PAGINA CON FORMATTAZIONE ORIZZONTALE IMMAGINE/TESTO ALTERNATE */				
							.div-img
							{
								width:50%;
							}				
							/* posiziona un'immagine (div-img) a sinistra del contenuto di un box (colonna-unica-testo)*/
							.img-sx{float:left;margin-right:20px;}
							/* posiziona un'immagine (div-img) a destra del contenuto di un box (colonna-unica-testo)*/
							.img-dx{float:right;margin-left:20px;}					

							.box-zoom-img
							{
								position:absolute; 
								top:0;
								left:0; 

								width:100%; 							

						
								-webkit-transition: 1s;
								-moz-transition: 1s;
								-o-transition: 1s;
								transition: 1s;	
							}
							.box-zoom-img:hover {
								/* zoom dell immagine del 4% all'interno del riquadro */
								width: 104%;
							}						
							
		
							
								.img{width:100%;}	

		
		
		
		



						
					

										/*opacity: 0;
										-webkit-transition: 0.2s linear;
										-moz-transition: 0.2s linear;
										-o-transition: 0.2s linear; 
										transition: 0.2s linear;*/										
																
									/*.box-auto > #box-nascondi:hover{ opacity:1; }	*/




		
		
			



			.privacy
			{
				position:fixed;
				
				bottom:2%;
				left:2%;
				
				width:96%;

				padding:40px;
				
				background-color:#222;
				border: solid 1px #DDD;
				opacity: 0.98;

				color:#EEE;
				text-align:justify;
				
				z-index:99;
				
			}









/* ---------------------------------------------- */
/* --- GESTIONE LINK SOCIAL --------------------- */
/* ---------------------------------------------- */

				#link
				{
					width:100%;
					padding:10px;
			
					-webkit-box-sizing: border-box;
					-moz-box-sizing: border-box;
					box-sizing: border-box; 			
				}	
	
	
	
	
				
/* -------------------------------------------------------------------------------------------------------------------------------- */
/* ---------- gestione versione MOBILE sotto i 980px ----------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 980px) 
{





body
{
	font-size:16px;
	line-height:20px;
}





			.spaziatura-menu
			{
				height:80px;
			}


			
			
			.spazio-img{height:20px;}			
			.spazio-col, .spaziatura-bassa{height:22px;}
			
			
			
			
			
			.sezione-flex, .sez-bottom, .colonna{display:block;}
			.sez-bottom
			{
				font-size:12px; 
				line-height:18px;
			}
				.sez-bottom titoli
				{
					font-size:14px;
					font-weight:bold;
				}			
				
				.bottom-allinea-t, .bottom-t-dx{text-align:center;}				
				
				.sez-bottom a{font-size:13px;}			
			
			
			
			
			
				.box-riga
				{		
					/* Giustifica orizzontalmente (Centra) tutti gli elementi inseriti all'interno di sezione che sono flex */
					-webkit-justify-content: center;
							justify-content: center;

					flex-flow: column;
					-webkit-flex-flow: column; /* imposta a colonna, gli elementi contenuti vengono posizionati verticalmente in colonna*/
	
				}			

			


			
					/*colonna*/
					
					.altezza-col{height:auto;}
					
					.impaginazione-a-col
					{
						/*Numero di colonne*/
						column-count: 1;
						/* Distanza tra le colonne*/
						column-gap: 0px;
					}
					
					
					
					.t-sx, .t-dx{text-align:justify;}
					.t-box{text-align:center;} /* da sinistra a centrato su mobile*/
					.stile-titolo{font-size:22px; 
					              padding-top:20px
					             }
					.col-2, .col-3, .col-4{
											width:100%;
											max-width:1200px;
										  }





							.box-zoom-img {
								position: static;
							}	





							.img-sx, .img-dx{
								float:none;
								width:100%;
								margin:0;
							}	
								
								
								
								
										
}		
		
		
		






		
/* -------------------------------------------------------------------------------------------------------------------------------- */
/* ---------- gestione versione MOBILE schermi retina ----------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------- */
/*and (-webkit-min-device-pixel-ratio: 2)*/
@media only screen and (min-resolution: 300dpi)
{
  
  
		body
		{
			font-size:36px;
			line-height:44px;
		}  



}










/* -------------------------------------------------------------------------------------------------------------------------------- */
/* ---------- gestione versione OLTRE 1220 PX ------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width: 1220px) 
{
	
	
	
	
	
			/* --------------------------------------------------------- */
			/* --- GESTIONE ELEMENTI PAGINE ---------------------------- */
			/* --------------------------------------------------------- */
			.sezione-flex, .sez-bottom
			{
				padding: 0 0 0 0;	
			}
			
				
	
	
	
}